<template>
    <div>
        
        <div style="margin: 10px 0;">
            <el-input style="width: 300px;" suffix-icon="el-icon-s-flag" placeholder="请输入宠物名" v-model="p_name"></el-input>
            <!-- <el-input style="width: 300px; margin-left: 5px;" suffix-icon="el-icon-s-promotion" placeholder="请输入邮箱"></el-input>
        <el-input style="width: 300px; margin-left: 5px;" suffix-icon="el-icon-location" placeholder="请输入地址"></el-input> -->
            <el-button style="margin-left: 5px;" type="primary" @click="load">搜索<i class="el-icon-search"></i></el-button>
            <el-button type="warning" @click="reset">重置<i class="el-icon-refresh"></i></el-button>
        </div>
        <!-- <div style="margin: 10px 0;">
            <el-button type="primary" @click="add">发布宠物<i class="el-icon-circle-plus-outline"></i></el-button>
        </div> -->
        <el-table :data="tableData" border stripe>
            <el-table-column prop="petid" label="宠物ID" width="80">
            </el-table-column>
            <el-table-column  label="图片" width="120">
              <template  slot-scope="scope">
   
                  <img :src="scope.row.image" alt="图片" width="60" height="60" style="border-radius: 50%;">
  
              </template>
  
            </el-table-column>
            <el-table-column prop="petname" label="宠物名" width="120">
            </el-table-column>
            <el-table-column prop="petage" label="年龄" width="60">
            </el-table-column>
            <el-table-column label="性别" width="60">
            <template scope="scope">
                  <span v-if="scope.row.petsex>0" style="color:#87CEFA; font-size: large">♂</span>
                  <span v-else style="color: #EEB4B4; font-size: large">♀</span>
            </template>
          </el-table-column>
            <el-table-column label="状态" width="120">
                <template scope="scope">
                  <span v-if="scope.row.status==2" style="color:red">已领养</span>
                  <span v-else-if="scope.row.status==0" style="color: #37B328">未领养</span>
                  <span v-else style="color: #EEC900">处理中</span>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="发布时间" width="240">
            </el-table-column>
            
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="success" @click="sendApply(scope.row)">申请领养<i class="el-icon-edit"></i></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[5, 10, 15]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="备注信息" :visible.sync="dialogFormVisible" width="30%">
            <el-form label-width="70px">
                <el-form-item label="请输入">
                    <el-input v-model="defaultnote" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="quit">取 消</el-button>
                <el-button type="primary" @click="sendApply2(pub)">确 定</el-button>
            </div>
        </el-dialog>
        <!-- <el-dialog title="宠物信息" :visible.sync="dialogFormVisible2" width="30%">
          <el-form label-width="70px">
              <el-form-item label="宠物名">
                  <el-input v-model="form.petname" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item prop="image" label="上传图片" v-model="form.image">
                <el-upload
                action=""
                list-type="picture-card"
                :auto-upload="false"
                :limit="Number(1)"
                :http-request="myUpload"
                ref="upload1"
                :on-success="imgSuccess"
                :file-list="imgfile"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
              <el-form-item label="年龄">
                  <el-input v-model="form.petage" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                  <el-input v-model="form.petsex" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="发布人ID">
                  <el-input v-model="userAcc.userid" autocomplete="off" disabled="true"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="quit">取 消</el-button>
              <el-button type="primary" @click="submitUpload(1)">确 定</el-button>
          </div>
      </el-dialog> -->
    </div>
  </template>
  <script>
  import axios from 'axios';
  
  export default {
    name: "Pet",
    props: {
  
    },
    data() {
        return {
            typ:0,
            p_name: '',
            pageNum: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            form: {},
            formX: {},
            collapseBtnClass: 'el-icon-s-fold',
            isCollapse: false,
            sideWidth: 200,
            logoTextShow: true,
            dialogFormVisible: false,
            dialogFormVisible2: false,
            multipleSelection: [],
            deleteIds: [],
            n: 0,
            dialogImageUrl: '',
            dialogVisible: false,
            imgfile:[],
            defaultnote:'',
            userAcc:'',
            pub:''
        }
    },
    created() {
        this.load();
    },
    methods: {
        handleExcelImportSuccess() {
            this.$message.success("文件导入成功");
            this.load();
        },
        exp() {
            window.open("http://localhost:8080/pet/export")
        },
        quit() {
            this.dialogFormVisible = false;
            this.dialogFormVisible2 = false;
            this.load();
        },
        deleteData() {
            this.$confirm('您确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                console.log(this.deleteIds);
                var p=new URLSearchParams();
                p.append("petid",this.deleteIds);
                axios({
                    
                    url:"http://localhost:8080/pet/delBatch",
                    method:"delete",
                    params:p
                }).then(obj=>{
                    if(obj.data){
                        this.$message.success("删除成功");
                        this.load();
                    }else{
                        this.$message.error("删除失败");
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
                this.load();
            });
        },
        handleSelectionChange(dataList) {
            this.deleteIds = [];
            dataList.forEach(item => {
                this.deleteIds.push(item.petid)
            })
            console.log(this.deleteIds);
        },
        del(id) {
            var p=new URLSearchParams();
            p.append("petid",id);
            axios({
                url:"http://localhost:8080/pet/delPet",
                method:"delete",
                params:p
            }).then(obj=>{
                if(obj.data){
                    this.$message.success("删除成功");
                    this.quit();
                    this.load();
                }else{
                    this.$message.error("删除失败");
                }
            });
        },
        edit(row) {
          this.imgfile=[];
          this.form = row;
          this.imgfile.push({name:"123.jpg", url:row.image});
          this.dialogFormVisible = true;
        },
        save() {
            // var t=new URLSearchParams();
            // t.append("userid",this.form.userid);
            var param=new URLSearchParams();
            param.append("petid",this.form.petid);
            param.append("petname",this.form.petname);
            param.append("petage",this.form.petage);
            param.append("image",this.dialogImageUrl);
            param.append("petsex",this.form.petsex);
            param.append("userid",this.userAcc.userid);
            var t=new URLSearchParams();
            t.append("petname",this.form.petname);
            t.append("petage",this.form.petage);
            t.append("image",this.dialogImageUrl);
            t.append("petsex",this.form.petsex);
            t.append("userid",this.userAcc.userid);
            
            if(this.typ==0){
                axios({
                    url:"http://localhost:8080/pet/updatePet",
                    method:"put",
                    data:param
                }).then(obj => {
                    if(obj.data){
                        this.$message.success("修改成功");
                        this.quit();
                        this.load();
                        
                    }else{
                        this.$message.error("修改失败");
                    }
                })
            }else{
              console.log(t);
                axios({
                    url:"http://localhost:8080/pet/addPet",
                    method:"post",
                    data:t
                }).then(obj=>{
                    if(obj.data){
                        this.$message.success("新增成功");
                        this.quit();
                        this.load();
                    }else{
                        this.$message.error("新增失败");
                    }
                });
                this.typ=0;
            }
            
            
        },
        add() {
            this.dialogFormVisible2 = true;
            this.typ=1;
            this.imgfile=[];
            this.form = {};
        },
        reset() {
            this.p_name = '';
            this.load();
        },
        load() {
            this.imgfile=[];
            this.userAcc=JSON.parse(sessionStorage.getItem("loginUser"));
            var param=new URLSearchParams();
            param.append("page",this.pageNum);
            param.append("size",this.pageSize);
            param.append("petname",this.p_name);
            axios({
                url:"http://localhost:8080/pet/petGet",
                method:"get",
                params:param
  
            }).then(obj => {
                this.tableData=obj.data.records;
                this.total=obj.data.total;
            })
                
        },
        
        handleSizeChange(pageSize) {
            console.log(pageSize);
            this.pageSize = pageSize;
            this.load();
        },
  
  
        handleCurrentChange(pageNum) {
            console.log(pageNum);
            this.pageNum = pageNum;
            this.load();
        },
  
        fileUrl(file){
          console.log(file);
        },
        
        imgSuccess(res, file) {
        this.dialogImageUrl=res.data;
        this.form.image=this.dialogImageUrl;
        console.log(res.data);
        //这里我是用一个fileList数组存取，当保存的时候进行图片路径处理
      },
  
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        submitUpload(value){
          if(value==1){
              this.$refs["upload1"].submit();
          }
        },
        myUpload(content){
          var param=new FormData();
          param.append("uploadFile",content.file);
          axios({
              url:"http://localhost:8080/pet/upload",
              method:"post",
              data:param
          }).then(obj=>{
              this.$message.success(obj.data.message);
              if(obj.data.status==1){
                  
                  this.dialogImageUrl=obj.data.data;
                  console.log(this.dialogImageUrl);
  
                  this.save();
                  this.clearFiles();
              }
          })
        },
        
      clearFiles () {
        this.$refs['upload1'].clearFiles();
      },
      sendApply(value){
        this.dialogFormVisible = true;
        this.pub=value;
        console.log(value);
        
    },
    sendApply2(value){
        var userinfo=JSON.parse(sessionStorage.getItem("loginUser"));
        console.log(userinfo.userid);
        var param=new URLSearchParams();
        param.append("petid",value.petid);
        param.append("userid",userinfo.userid);
        param.append("adostatus",value.status);
        param.append("note",this.defaultnote);
        axios({
            url:"http://localhost:8080/adoption/petApply",
            method:"post",
            params:param
        }).then(obj=>{
            console.log(obj);
            this.pub='';
            if(obj.data){
                value.status=1;
                console.log(value);
                var p=new URLSearchParams();
                p.append("petid",value.petid);
                p.append("petname",value.petname);
                p.append("petage",value.petage);
                p.append("image",value.image);
                p.append("petsex",value.petsex);
                p.append("userid",value.userid);
                p.append("status",value.status);
                axios({
                    url:"http://localhost:8080/pet/updatePet",
                    method:"put",
                    data:p
                }).then(res=>{
                    console.log(res);
                    this.$message.success("申请成功,请等待管理员同意");
                    this.quit();
                    this.load();
                });
                
            }
        });
    }
  
    },
    
  }
  </script>